﻿/// <reference path="~/app/libs/sencha-touch-debug.js" />
Ext.define("iMobileS.view.CategoriesContainer", {
    extend: "Ext.Container",
    alias: "widget.categoriescontainer",
    initialize: function () {
        this.callParent(arguments);
        //Define for top toolbar
        var topToolbar = {
            xtype: "toolbar",
            title: 'Southern Supper Market',
            docked: "top"
        };

        //Header
        /* var headerPanel = {
        xtype: "panel",
        layout: "hbox",
        style: "padding: 7px; 7px 0px 7px",
        docked: "top",
        items: [
        {
        flex: 1,
        xtype: "panel",
        cls: "check-out-text",
        html: "<div>Yes, send me the following Product Reports.</div>"
        }, {
        flex: 1,
        xtype: "panel",
        width: 93,
        items: [
        {
        xtype: "button",
        text: "Check out",
        ui: "decline",
        width: 90,
        cls: "check-out-button",
        handler: this.onCheckOutClick,
        scope: this
        }
        ]
        }
        ]
        };*/

        //Categories
        var categories = {
            xtype: "categories",
            store: Ext.getStore("Categories"),
            floating: true,
            width: "100%",
            height: "100%",
            ui: "round",
            listeners: {
                disclose: { fn: this.onCategoriesDiscloseChanged, scope: this },
                itemtap: { fn: this.onCategoriesSelectedChanged, scope: this }
            }
        };

        //Add control to container
        this.add([
            topToolbar,
        /*headerPanel,*/
            categories
        ]);
    },
    onCategoriesDiscloseChanged: function (list, record, target, index, evt, options) {
        //Call event from controller to process
        this.fireEvent("onCategoriesDiscloseChanged", list, record, target, index, evt, options);
    },
    onCategoriesSelectedChanged: function (list, index, e, options) {
        this.fireEvent('onCategoriesSelectedChanged', list, index);
    },
    config: {
        layout: {
            type: 'fit'
        },
        fullscreen: true
    }
});